<template>

  <div style="padding-left: 10px;">
      <el-avatar shape="square" :size="100" :src="props.modelValue" @click="drawer = true">
          <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
      </el-avatar>
      <el-drawer
              v-model="drawer"
              title="图库"
              :with-header="true"
              direction="rtl"
              size="40%">
          <el-upload
                  list-type="picture-card"
                  :auto-upload="false"
                  v-model:file-list="fileList"
                  :on-change="onChange">
              <el-icon>
                  <Plus/>
              </el-icon>
              <template #file="{ file }">
                  <div>
                      <img class="el-upload-list__item-thumbnail" :src="file.url"/>
                      <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview">
            <el-icon @click="getImgUrl(file.url)">
                <check/>
            </el-icon>
          </span>
        </span>
                  </div>
              </template>
          </el-upload>
      </el-drawer>
  </div>


</template>

<script setup lang="ts">
import {ref, onMounted, watch} from 'vue'
import {uploadApi} from '@/api'

const props = defineProps({modelValue: {type: String, default: ''}})
const emit = defineEmits(['update:modelValue'])
onMounted(() => {

    //调用图片列表
    callUploadListApi()
})

const drawer = ref(false)
const getImgUrl = (val: any) => {

    emit('update:modelValue', val)
    drawer.value = false
}

const fileList = ref([])
const onChange = (uploadFile: any, uploadFiles: any) => {
    let name = uploadFile.name
    let file = uploadFile.raw
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
        callUploadApi(name, reader.result as string)
    }
}
const callUploadApi = (name: string, base64: string) => {
    uploadApi.upload.call({name: name, base64: base64}).then((res: any) => {
        callUploadListApi()
    })
}
const callUploadListApi = () => {
    uploadApi.imgList.call().then((res: any) => {
        fileList.value = res
    })
}

</script>

<style scoped>

</style>